<template>
  <div>
    <el-dialog :visible="chooseVisible" title="添加商品" class="dialog" @close="closeDialog()">
      <div class="app-container">
        <!-- {{ search }} -->
        <!-- {{ sentData }} -->
        <!-- {{ receiveData }} -->
        <div class="inputBox">
          <el-col :span="6">
            <el-input v-model="search.name" class="input" placeholder="请输商品名称查询" />
          </el-col>
          <el-col :span="6">
            <el-select v-model="search.categoryId" class="type" placeholder="请选择商品类型">
              <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" class="ml10" @click="toSearch">查询</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="toReset">重置</el-button>
          </el-col>

        </div>
        <el-table
          v-loading="listLoading"
          :data="list"
          class="table"
          element-loading-text="加载中请稍后"
          border
          fit
          highlight-current-row
          @row-click="clickRow">
          <el-table-column align="center" label="选择">
            <template slot-scope="scope">
              <el-radio v-model="chooseRadio" :label="scope.row.id">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <!-- <el-table-column label="溯源商品编号">
            <template slot-scope="scope">
              {{ scope.row.number }}
            </template>
          </el-table-column> -->
          <el-table-column label="商品名称">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="商品类型" width="80">
            <template slot-scope="scope">
              {{ scope.row.categoryName }}
            </template>
          </el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img :src="scope.row.picUrl" class="img">
            </template>
          </el-table-column>
          <el-table-column label="商品价格" width="170">
            <template slot-scope="scope">
              <p class="price">门市价: &nbsp;{{ scope.row.retailPrice }}</p>
              <p class="price">销售价: &nbsp;{{ scope.row.salePrice }}</p>
              <p v-if="settingMode !== 'source'" class="price">分销提成: {{ scope.row.brokerage }}</p>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.pageNum"
          :limit.sync="listQuery.pageSize"
          :page-sizes="[5,10,15,20,25,30]"
          @pagination="fetchData" />
        <!-- <detail :detialvisible.sync="dialogTableVisible" :dialogdata.sync="list" :myindex.sync="detailIndex" :detail-mode="'menberManage'" /> -->
        <div class="bottomButton">
          <el-button v-preventReClick type="primary" @click="sentDataFn()">确定</el-button>
          <el-button v-preventReClick type="info" @click="closeDialog()">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { wxGoodsPage } from '@/api/productCarousel'
import { categoryQuery } from '@/api/product'
import { Message } from 'element-ui'
export default {
  components: { Pagination },
  props: {
    chooseVisible: {
      type: Boolean,
      required: true
    },
    receiveData: {
      type: Object,
      required: true
    },
    settingMode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chooseRadio: 0,
      list: [],
      total: 0,
      listLoading: false,
      categoryList: [], // 分类信息
      listQuery: {
        pageNum: 0,
        pageSize: 5
      },
      search: {
        name: '',
        categoryId: ''
      },
      sentData: {},
      dialogTableVisible: false,
      detailList: [],
      formLabelWidth: '120px',
      detailIndex: -1
    }
  },
  watch: {
    // 'chooseVisible'(nowVal, oldVal) {
    //   console.log(nowVal)
    //   if (nowVal) {
    //     this.fetchData()
    //   }
    // }
  },
  mounted() {
    this.getCategory()
    this.fetchData()
  },
  methods: {
    sentDataFn() {
      this.$emit('onReceiveData', this.sentData)
      // this.$emit('update:receiveData', this.sentData)
      this.chooseRadio = ''
      this.sentData = {}
      this.closeDialog()
    },
    // 获取所有分类信息
    getCategory() {
      categoryQuery().then(res => {
        console.log('获取所有分类信息:', res)
        if (res.code === '200') {
          this.categoryList = res.data
        }
      })
    },
    // 点击连接到菜单选中行记录数据
    clickRow(row) {
      this.chooseRadio = row.id
      this.sentData = row
      console.log(this.sentData)
    },
    closeDialog() {
      this.$emit('update:chooseVisible', false)
    },
    toReset() {
      this.search.name = ''
      this.search.categoryId = ''
    },
    toSearch() {
      this.listLoading = true
      const newData = Object.assign(this.listQuery, this.search)
      wxGoodsPage(newData).then(res => {
        if (res.code === '200') {
          this.list = res.data.list
          this.total = res.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          Message.error(res.message + res.data)
        }
        console.log('获取关联数据：', res)
      })
    },
    fetchData() {
      this.listLoading = true
      wxGoodsPage(this.listQuery).then(res => {
        if (res.code === '200') {
          this.list = res.data.list
          this.total = res.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          Message.error(res.message + res.data)
        }
        console.log('获取关联数据：', res)
      })
    }
  }
}
</script>>
<style>
.input{
    width:90%;
}
.inputBox{
    overflow: hidden;
    padding-bottom: 10px;
}
.dialog, .el-dialog{
    min-width: 800px;
}
.el-dialog__body{
    padding: 0 !important;
}
.pagination-container{
    padding: 14px 16px;
}
.bottomButton{
    padding-top: 10px;
    border-top: 1px solid #DDD;
    width: 100%;
    height: 40px;
    text-align: center;
}
.price{
    margin:0;
    line-height: 20px;
    font-size: 12px;
}

.img{
    width:50px;
    height:50px;
}
</style>
